<template>
  <div id="layout">
    <div id="global">
      <div class="long-container" data-v-309157c1>
        <img :src="imageurl" alt="">
        <div class="field-container" v-for="(item,index) in medicineInfo" :key="index">
          <div id="component" class="flex items-center" data-v-7b7b7f4b>
            <h2>{{item.title}}:</h2>
          </div>
          <div style="margin-top:12px"></div>
          <div class="field-content">
            <p v-if="item.title === '药名'"><span class="highlight-color">【{{item.content}}】</span></p>
            <p v-else>{{item.content}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/api/request'

export default {
  // 中药详情页
  data: function () {
    return {
      dataInfo: [],
      medicineInfo: [],
      imageurl: ''
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      const id = this.$route.params.id
      // alert(id)
      // axios.get(`http://127.0.0.1:8888/search/medicineList/${id}`).then()
      // /chinese/${id}
      request.get(`/search/medicineList/${id}`).then(res => { // 改成走索引库查询
        this.dataInfo = res.data.data
        this.imageurl = this.dataInfo.imageurl
        // alert(this.imageurl)
        // const info = res.data.date
        this.generateMedicineInfo()
        // alert()
      }).catch(err => {
        this.handleAxiosError(err)
      })
    },
    generateMedicineInfo () {
      this.medicineInfo = [
        { title: '药名', content: this.dataInfo.componentName },
        { title: '成分', content: this.dataInfo.character },
        { title: '性状', content: this.dataInfo.mainEffect },
        { title: '主要功效', content: this.dataInfo.malady },
        { title: '临床应用及指南', content: this.dataInfo.clinicalPractice },
        { title: '规格', content: this.dataInfo.specifications },
        { title: '用法用量', content: this.dataInfo.usageDosage },
        { title: '注意事项', content: this.dataInfo.note },
        { title: '不良反应', content: this.dataInfo.untowardReaction },
        { title: '禁忌', content: this.dataInfo.taboo },
        { title: '药物相互作用', content: this.dataInfo.drugInteractions },
        { title: '执行标准', content: this.dataInfo.carriedTandard },
        { title: '贮藏方法', content: this.dataInfo.storageMethods },
        { title: '有效期', content: this.dataInfo.expirationDate }
      ]
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        // this.$message.error('网络请求失败，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      } else {
        // 处理其他类型的错误
        // this.$message.error('网络请求失败，发生错误，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
#layout {
  position relative
  padding: 0 190px;
  width 1200px
  img{
    position absolute
    width 300px
    height 300px
    padding-left 400px
    top 6px
    // margin-top  200px
  }
}
h2{
  /*font-size: 14px;*/
  padding-right: 200px;
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position relative;
  &::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 27px;
    left: -29px;
    //top: 0;
    bottom 0;
    background: #ff5555;
  }
}
p{
  padding-right: 200px;
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-left: 12px;
  white-space: pre-line;
  font-size 16px;
}
.highlight-color {
  color blue;
  font-size 20px;
  font-weight bold;
}
</style>
